/*
 * @Author: ZARR 
 * @Date: 2018-03-30 10:07:53 
 * @Last Modified by: LIWEI
 * @Last Modified time: 2018-08-12 22:18:39
 * @功能: 官网Header组件  
 */

<template>

    <nav :class="[{'abso' : isAbsolute},{'mobile' : isMobile},{'menuShow' : menuOpen},{'even' : even % 2 == 1}]">
		<div class="container">
			<a href="https://swellpro.tmall.com/?spm=a220o.1000855.1997427721.d4918089.21053b87sMjig1" v-if="isMobile">
	    		<div class="iconfont icon-shangcheng1"></div>
	    	</a>
	    	<div class="logo" >
	    		<a href="https://www.swellpro.cn">
	    			<div class="iconfont icon-swellpro"></div>
	    		</a>
	    	</div>
	    	<div class="PcHeaderNavbar" v-if="!isMobile">
	    		<div class="item">
	    			<a href="/spry.html">雨燕便携防水无人机</a>
	    		</div>
	    		<div class="item">
	    			<a href="">无人机</a>
	    			<div class="itemDetail">
	    				<div class="container">
	    					<div class="products">
	    						<a class="list" href="/waterproof-splash-drone-3-auto.html">
	    							<img src="https://cdn.swellpro.cn/index/auto.png" alt="SplashDrone Auto">
	    							<p>水手3旗舰版</p>
	    						</a>
	    						<a class="list" href="/waterproof-splash-drone-3-fisherman.html">
	    							<img src="https://cdn.swellpro.cn/index/fisherman.png" alt="SplashDrone Fisherman">
	    							<p>水手3钓鱼版</p>
	    						</a>	    						
	    						<a class="list">
	    							<div class="box">
	    								所有产品 >>
	    							</div>
	    						</a>
	    					</div>
	    				</div>
	    			</div>
	    		</div>
	    		<div class="item">
	    		   <a href="">售后与支持</a>
	    		   <div class="itemDetail">
	    		      <div class="oneHandle">
	    		      	 <div class="container" style="margin-left:350px">
	    		      	 	<a href="" >售后服务</a>
	    		      	 	<a href="/download.html">下载</a>
	    		      	 	<a href="/tutorial.html">视频教程</a>
	    		      	 	<a href="">常见问题解答</a>
	    		      	 </div>
	    		      </div>
	    		   </div>
	    		</div>
	    		<div class="item"><a href="/contact.html">联系我们</a></div>
	    		<div class="item"><button><a href="https://swellpro.tmall.com/?spm=a220o.1000855.1997427721.d4918089.21053b87sMjig1">天猫商城</a></button></div>
	    	</div>
	    	<div class="MobileHeaderNavbar" v-if="isMobile">
		    	<div class="iconContent"  @click="showMobileMenu">
		    		<div class="icon-bar first"></div>
		    		<div class="icon-bar second"></div>
		    		<div class="icon-bar third"></div>
		    	</div>
		    	<div class="menu">
		    		<a href="/spry.html" class="animationOne">雨燕便携防水无人机</a>
		    		<div class="more" :class="[{'moreListOpen' : menuListOpenOne}, 'animationOne']" style="transition-delay:.1s">
		    			<p  @click="openMenu(true)">无人机<span style="float:right">></span></p>
		    			<div class="moreList" >
		    			  <a href="/waterproof-splash-drone-3-auto.html">水手三代旗舰版</a>
		    			  <a href="/waterproof-splash-drone-3-fisherman.html">水手三代钓鱼版</a>
		    			  <a href="">所有产品</a>
		    			</div>
		    		</div>
		    		<div class="more" :class="[{'moreListOpen' : menuListOpenTwo}, 'animationOne']" style="transition-delay:.2s">
		    			<p @click="openMenu(false)">售后与支持<span style="float:right">></span></p>
		    			<div class="moreList" >
		    			  <a href="">售后服务</a>
		    			  <a href="/download.html">下载</a>
		    			  <a href="/tutorial.html">视频教程</a>
		    			  <a href="">常见问题解答</a>
		    			</div>
		    		</div>
		    		<a href="/contact.html" class="animationOne" style="transition-delay:.3s">联系我们</a>
		    	</div>
	    	</div>
	    </div>
    </nav>
</template>

<script>
export default {
	props:{ 
		isAbsolute: {  //控制顶部导航栏是否为绝对定位
			type: Boolean,
			default: true,
		},
		isMobile: {
			type: Boolean,
			required: true
		},
		even: {
			type: Number,
			default: 0
		}
	},
	data(){
		return {
            menuOpen:false,
            menuListOpenOne:false,
            menuListOpenTwo:false,
		}
	},
	methods:{
		showMobileMenu(){
            this.menuOpen = !this.menuOpen;
            this.menuListOpenOne = false;
            this.menuListOpenTwo = false;
		},
		openMenu(flag){
			if(flag === true){ //说明是第一个menu
                this.menuListOpenOne = !this.menuListOpenOne;
                if(this.menuListOpenTwo)
                this.menuListOpenTwo = false;
			}else{ //说明是第二个menu
                this.menuListOpenTwo = !this.menuListOpenTwo;
                if(this.menuListOpenOne)
                this.menuListOpenOne = false;
			}
		}
	}
}
</script>

<style lang="stylus" scope>
nav
	width 100%
	height 60px
	z-index 100
	background #1f2024
	position relative
	font-weight 100
	.iconfont
		color #fff
		width 121px
		height 31px
		font-size 27px
	>.container
		display flex
		color #fff
		.logo
			flex 0 0 250px
			height 60px
			a
				padding-top 15px
				display block
				img
					display block
		.PcHeaderNavbar
			flex 0 0 850px
			display flex
			.item
				display flex
				flex 1
				justify-content center
				align-items center
				>a
					display block
					color #fff
				button
					background #f26444
					padding 6px 12px
					border none
					border-radius 3px
					font-size 14px
					cursor pointer
					a
						color #fff
				.itemDetail
					position absolute
					top 60px
					left 0px
					width 100%
					background #fff
					max-height 0px
					transition all .3s ease-in
					z-index 101
					overflow hidden
					>.container
						.products
							width 1170px
							display flex
							>.first
								margin-left 220px
							>.list
								color rgba(0,0,0,.56)
								flex  0 0 20%
								padding 20px 0 50px
								text-align center
								display block
								transition all .6s
								opacity 0
								transform translate3d(100%,0,0)
								transition-delay .3s
								img
									width 100%
									transition all .3s
								p
									transition all .3s
								&:hover
									img
										transform scale(1.04)
									p
										color #f26444
								.box
									width 100%
									height 158px
									border 1px solid rgba(0,0,0,.56)
									margin-top 27px
									display flex
									justify-content center
									align-items center
									transition all .3s ease-in
									&:hover
										border-color #f26444
										color #fff
										background #f26444
					.oneHandle
						width 100%
						height 60px
						>.container
							display flex
							a
								line-height 60px
								padding 0 20px
								color rgba(0,0,0,.56)
								transition transform,opacity .3s ease-in
								opacity 0
								transition-delay .2s
								transform translate3d(0,100%,0)
								&:hover
									color #f26444
				&:hover
					cursor pointer
					.itemDetail
						max-height 300px
						>.container
							.products
								>.list
									opacity 1
									transform translate3d(0,0,0)
						.oneHandle
							>.container
								a
									opacity 1
									transform translate3d(0,0,0)
		.MobileHeaderNavbar
			flex  0 0 22px
.abso
	position absolute
	background none
.even
	.iconfont
		color #000 
	>.container
		.PcHeaderNavbar
			.item
				>a
					color #000
	.icon-bar
		background #000!important
.mobile
	.iconfont
		width auto
		height auto  
	>.container
		justify-content space-between
		flex-direction row-reverse
		>a
			line-height 60px
			.iconfont
				font-size 23px
		.logo
			flex 0 0 108px
		a
			font-size 15px
		p
			font-size 18px
			font-weight 100
		.MobileHeaderNavbar
			display flex
			justify-content flex-end
			align-items center
			.icon-bar
				background #fff
				border-radius 1px
				margin-top 4px
				width 22px
				height 2px
				transition transform .6s
			.menu
				position fixed
				z-index 999
				top 60px
				left 0px
				width 100%
				height calc(100vh - 60px)
				background #1f2024
				transition all .3s ease
				max-height 0px
				overflow hidden
				padding 0 30px
				box-sizing border-box
				>a
					line-height 40px
					margin-top 15px
					display block
					color #fff
					border-bottom 1px solid #fff
					transition all .3s
					opacity 0
					transform translateX(25px)
					font-size 18px
					font-weight 100
				>.more
					line-height 40px
					margin-top 15px
					position relative
					border-bottom 1px solid #fff
					transition all .3s
					opacity 0
					transform translateX(25px)
					.moreList
						transition all .6s
						overflow: hidden
						max-height 0px
						>a
							color #fff
							line-height 40px
							display block
					span
						transition all .3s ease
						font-size 25px
				.moreListOpen
					>.moreList
						max-height 1000px
					span
						transform rotate(90deg)
			.iconContent
				transition all .3s
.menuShow
	background #1f2024
	position  fixed
	z-index 110
	.iconfont
		color #fff
	.icon-bar
		background #fff!important
	.menu
		max-height 2000px!important
		>.animationOne
			opacity 1!important
			transform translateX(0px)!important
	.iconContent
		transform rotate(90deg)
		.third
			transform translateY(-12px) rotate(-45deg)
		.first
			transform rotate(45deg)
		.second
			opacity 0			
</style>
